<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>修改轮播图</title>
    <!-- title -->
    <% include ../public/page_title.html%>
</head>
<body class="main_body">
    <fieldset class="layui-elem-field" style="margin:10px;">
        <legend>修改轮播图</legend>
        <div class="layui-field-box">
            <div class="layui-row">
                <div class="layui-col-md9">
                    <form class="layui-form" style='padding:15px 0;'>
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类</label>
                            <div class="layui-input-inline">
                                <select id="type" name="type" class="newsLook" lay-filter="type">
                                    <option value="1" <% if(list.type==1){%>selected<%}%>>网站</option>
                                    <option value="2" <% if(list.type==2){%>selected<%}%>>APP</option>
                                    <option value="3" <% if(list.type==3){%>selected<%}%>>小程序</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" value="<%=list.title%>" placeholder="请输入名称" class="layui-input" lay-verify="title">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">跳转地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="link" value="<%=list.link%>" placeholder="请输入跳转地址,默认空" class="layui-input" >
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传图片</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="upload">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item" id='imgBox'>
                            <label class="layui-form-label">图片预览</label>
                            <div class="layui-input-block" id='imgs'>
                                <img src="<%=list.img.src%>" width="200" alt=""/>
                                <input type="hidden" name="img_id" value="<%=list.img_id%>">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input name="sort" value="<%=list.sort%>" placeholder="请输入排序" lay-verify="sort" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="status" <%if(list.status==1){%>checked<%}%> lay-skin="switch" lay-text="显示|隐藏">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id='editFocus' class="layui-btn" lay-submit lay-filter="editFocus">保存修改</button>
                                <a href="<%=adminName%>/focus" class="layui-btn layui-btn-primary">返回</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </fieldset>
	<script type="text/javascript" src="/public/admin/layui/layui.js"></script>
    <script type="text/javascript" src="/public/admin/js/index.js"></script>
    <script>
         layui.use(['form','jquery', 'upload'], function() {
            var form = layui.form,
                $ = layui.jquery,
                upload = layui.upload;
            //自定义验证规则
            form.verify({
                title: function(value) {
                    if(value.length ==0 ) {
                        return '请输入名称';
                    }
                },
                sort: function(value) {
                    if(value.length ==0 ) {
                        return '请输入排序';
                    }else if(isNaN(value)){
                        return '排序不能是非数字';
                    }
                },
            });
            $("#type").find("option[value='<%=list.type%>']").prop("selected",true);
            form.render('select');
            //执行实例
            var uploadInst = upload.render({
                elem: '#upload', //绑定元素
                url: "<%=adminName%>/upload?_csrf=<%=csrf%>", //上传接口
                done: function(res){
                    //上传完毕回调
                    if(res.code===0){
                        layer.msg(res.msg);
                        $('#imgBox').show()
                        var html = '';
                        for(var i=0;i<res.data.length;i++){
                            html+='<img src="'+res.data[i]['file']+'" width="200" alt=""/><input type="hidden" name="img_id" value="'+res.data[i]['_id']+'">';
                        }
                        $('#imgs').html(html)
                    }else{
                        layer.msg(res.msg);
                    }
                },
                error: function(){
                //请求异常回调
                    layer.msg('请求出错');
                }
            });
            $('#imgs').find('img').on('click',function(){
                var src = $(this).attr('src');
                var h = $(this).height();
                var w = $(this).width();
                var area = '500px';
                if(h>w){
                    area = '400px';
                }else if(h<w){
                    area = '700px';
                }
				layer.open({
					area:area,
					title: '图片预览',
					content: '<img src="'+src+'" width="100%">',
				}); 
            })
            //监听提交
            form.on('submit(editFocus)', function(data) {
                data.field._csrf = "<%=csrf%>";
                data.field.id = "<%=id%>";
                $('#editFocus').attr('disabled',true)
                if(data.field.status){
                    data.field.status = 1
                }else{
                    data.field.status = 0
                }
                if(!data.field.img_id){
                    layer.msg('请选择图片');
                    $('#editFocus').removeAttr('disabled');
                    return false;
                }
                console.log(data.field)
                $.ajax({
                    type:'post',
                    data:data.field,
                    dataType:'json',
                    url:'<%=adminName%>/focus/doedit',
                    success:function(res){
                        console.log(res);
                        if(res.code===0){
                            layer.msg(res.msg);
                            setTimeout(function(){
                                window.location.href = "<%=adminName%>/focus"
                            },500)
                        }else{
                            layer.msg(res.msg);
                            $('#editFocus').removeAttr('disabled');
                        }
                        
                    },
                    error:function(err){
                        layer.msg('后台出错');
                        $('#editFocus').removeAttr('disabled');
                    }
                })
                return false;
            })
        })
    </script>
</body>
</html>